// ==UserScript==
// @name         TikTok 测试
// @namespace    http://tampermonkey.net/
// @version      5.29
// @description  获取 TikTok 数据！
// @author
// @match        https://www.tiktok.com/*
// @grant        GM_registerMenuCommand
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_getResourceText
// @grant        GM_addStyle
// @grant        GM_xmlhttpRequest
// @connect      tiktok.com
// @icon         https://iili.io/dy5xjOg.jpg
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/toastify-js/1.12.0/toastify.min.js
// @resource     TOASTIFY_CSS https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css
// ==/UserScript==

(function() {
    'use strict';

    // 加载 Toastify.js 的 CSS
    const toastifyCSS = GM_getResourceText('TOASTIFY_CSS');
    GM_addStyle(toastifyCSS);

    // 注入样式到页面
    injectStyles();

    let currentUrl = window.location.href;
    let parsedData = {};

    // 获取设置值，默认值为 false
    let autoShowDataPanel = GM_getValue('autoShowDataPanel', false);

    // 在脚本菜单中添加选项以设置是否自动弹出数据面板
    GM_registerMenuCommand('切换自动弹出数据面板', () => {
        autoShowDataPanel = !autoShowDataPanel;
        GM_setValue('autoShowDataPanel', autoShowDataPanel);
        alert(`自动弹出数据面板已${autoShowDataPanel ? '启用' : '禁用'}`);
    });

    // 注入样式到页面
    function injectStyles() {
        if (document.getElementById('customStyles')) {
            return; // 已经注入样式
        }
        const styleElement = document.createElement('style');
        styleElement.id = 'customStyles';
        styleElement.type = 'text/css';
        styleElement.textContent = `
.button-85 {
    padding: 0.6em 0.8em;
    border: none;
    outline: none;
    color: rgb(255, 255, 255);
    background: #111;
    cursor: pointer;
    position: fixed;
    z-index: 10001;
    border-radius: 10px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.button-85:before {
    content: "";
    background: linear-gradient(
        45deg,
        #ff0000,
        #ff7300,
        #fffb00,
        #48ff00,
        #00ffd5,
        #002bff,
        #7a00ff,
        #ff00c8,
        #ff0000
    );
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing-button-85 20s linear infinite;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
}

@keyframes glowing-button-85 {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 400% 0;
    }
    100% {
        background-position: 0 0;
    }
}

.button-85:after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #222;
    left: 0;
    top: 0;
    border-radius: 10px;
}

#tiktokDataContainer {
    font-family: Arial, sans-serif;
}

#tiktokDataContainer input {
    width: calc(100% - 20px);
    padding: 0.5em;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

#tiktokDataContainer #refreshButton {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 15px;
}

#tiktokDataContainer #refreshButton img {
    width: 20px;
    height: 20px;
}

#tiktokDataContainer #loadingIndicator {
    text-align: center;
    margin-top: 20px;
}

.copy-btn {
    background: none;
    border: none;
    cursor: pointer;
}

`;
        document.head.appendChild(styleElement);
    }

    // 创建用于显示数据面板的按钮
    function createButton() {
        // 创建数据按钮
        let dataButton = document.querySelector('#tiktokDataButton');
        if (!dataButton) {
            dataButton = document.createElement('button');
            dataButton.id = 'tiktokDataButton';
            dataButton.className = 'button-85';
            dataButton.innerHTML = '🤓';
            dataButton.style.top = '10px';
            dataButton.style.right = '50px';

            dataButton.addEventListener('click', () => {
                toggleDataDisplay();
            });

            document.body.appendChild(dataButton);
            console.log('数据按钮已创建并添加到页面。');
        }
    }

    // 切换数据面板的显示和隐藏
    function toggleDataDisplay() {
        console.log('调用了 toggleDataDisplay');
        let dataContainer = document.querySelector('#tiktokDataContainer');
        if (dataContainer) {
            // 如果面板已存在，则移除
            dataContainer.style.transform = 'translateX(100%)';
            dataContainer.style.opacity = '0';
            setTimeout(() => {
                dataContainer.remove();
            }, 500);
            return;
        }

        // 创建新的数据面板
        showDataPanel();
    }

    // 显示或更新数据面板
    function showDataPanel() {
        let dataContainer = document.querySelector('#tiktokDataContainer');
        if (dataContainer) {
            // 更新数据面板内容而不关闭面板
            updateDataContainerContent(dataContainer, parsedData);
        } else {
            // 创建新的数据面板
            dataContainer = document.createElement('div');
            dataContainer.id = 'tiktokDataContainer';
            dataContainer.style.transition = 'transform 0.5s ease-in-out, opacity 0.5s ease-in-out';
            dataContainer.style.transform = 'translateX(100%)';
            dataContainer.style.opacity = '0';
            dataContainer.style.position = 'fixed';
            dataContainer.style.top = '60px';
            dataContainer.style.right = '20px';
            dataContainer.style.width = '300px';
            dataContainer.style.maxHeight = '400px';
            dataContainer.style.overflowY = 'auto';
            dataContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
            dataContainer.style.border = '1px solid #ccc';
            dataContainer.style.borderRadius = '8px';
            dataContainer.style.boxShadow = '0px 0px 10px rgba(0, 0, 0, 0.1)';
            dataContainer.style.padding = '15px';
            dataContainer.style.zIndex = '10000';
            dataContainer.style.backdropFilter = 'blur(10px)';
            dataContainer.style.boxSizing = 'border-box';

            // 刷新按钮
            const refreshButton = document.createElement('button');
            refreshButton.id = 'refreshButton';
            refreshButton.title = '刷新数据';
            refreshButton.innerHTML = '🔄️';
            refreshButton.style.fontSize = '20px';
            refreshButton.style.top = '17px';
            refreshButton.style.right = '30px';
            refreshButton.addEventListener('click', () => {
                console.log('手动刷新按钮被点击。');
                currentUrl = window.location.href;
                // 提取数据并在提取完成后更新显示
                extractStats(true);
            });
            dataContainer.appendChild(refreshButton);

            // 输入框
            const urlInput = document.createElement('input');
            urlInput.id = 'tiktokUrlInput';
            urlInput.placeholder = '输入 TikTok 视频或用户链接';
            urlInput.style.width = '100%'
            dataContainer.appendChild(urlInput);

            // 添加键盘事件监听器，当按下回车键时触发数据获取
            urlInput.addEventListener('keydown', (event) => {
                if (event.key === 'Enter') {
                    const url = urlInput.value.trim();
                    if (url) {
                        fetchDataFromUrl(url, () => {
                            showDataPanel();
                        });
                    } else {
                        showNotification('请输入有效的 TikTok 视频或用户链接');
                    }
                }
            });

            // 内容容器
            const contentContainer = document.createElement('div');
            contentContainer.id = 'contentContainer';
            dataContainer.appendChild(contentContainer);

            document.body.appendChild(dataContainer);
            setTimeout(() => {
                dataContainer.style.transform = 'translateX(0)';
                dataContainer.style.opacity = '1';
            }, 10);
        }
    }

    function updateDataContainerContent(container, data) {
        const contentContainer = container.querySelector('#contentContainer');
        // 清空现有内容
        contentContainer.innerHTML = '';

        if (data.loading) {
            // 显示加载指示器
            const loadingIndicator = document.createElement('div');
            loadingIndicator.id = 'loadingIndicator';
            loadingIndicator.innerHTML = '正在获取数据...';
            loadingIndicator.style.color = 'black'
            contentContainer.appendChild(loadingIndicator);
            return;
        }

        if (Object.keys(data).length === 0) {
            // 没有数据可显示
            contentContainer.innerHTML = '暂无数据';
            contentContainer.style.color = 'black';
            return;
        }

        // 使用模板字符串生成 HTML 内容
        const dataHtml = generateDataHtml(data);
        contentContainer.innerHTML = dataHtml;

        // 为复制按钮添加事件监听器
        const copyButtons = contentContainer.querySelectorAll('.copy-btn');
        copyButtons.forEach(button => {
            button.addEventListener('click', (event) => {
                const copyValue = event.target.getAttribute('data-copy');
                navigator.clipboard.writeText(copyValue).then(() => {
                    showNotification('已复制到剪贴板');
                }).catch(err => {
                    console.error('复制失败:', err);
                });
            });
        });
    }

    function generateDataHtml(data) {
        const {
            accountName,
            followerCount,
            diggCount,
            playCount,
            commentCount,
            shareCount,
            collectCount,
            createTime
        } = data;

        const formattedTime = createTime ? new Date(createTime * 1000).toLocaleString() : '未知';

        const dataHtml = `
        <h1 style="text-align: center; color: black; font-size:15px;">---帖子信息---</h1>
        <p style="color: black;">发布时间: ${formattedTime} <button class="copy-btn" data-copy="${formattedTime}" style="background:none; border:none; cursor:pointer;">📋</button></p>
        <p style="color: black;">点赞数: ${diggCount} <button class="copy-btn" data-copy="${diggCount}" style="background:none; border:none; cursor:pointer;">📋</button></p>
        <p style="color: black;">播放数: ${playCount} <button class="copy-btn" data-copy="${playCount}" style="background:none; border:none; cursor:pointer;">📋</button></p>
        <p style="color: black;">评论数: ${commentCount} <button class="copy-btn" data-copy="${commentCount}" style="background:none; border:none; cursor:pointer;">📋</button></p>
        <p style="color: black;">分享数: ${shareCount} <button class="copy-btn" data-copy="${shareCount}" style="background:none; border:none; cursor:pointer;">📋</button></p>
        <p style="color: black;">收藏数: ${collectCount} <button class="copy-btn" data-copy="${collectCount}" style="background:none; border:none; cursor:pointer;">📋</button></p>
        <h1 style="text-align: center; color: black; font-size:15px;">---用户信息---</h1>
        <p style="color: black;">账户名: ${accountName} <button class="copy-btn" data-copy="${accountName}" style="background:none; border:none; cursor:pointer;">📋</button></p>
        <p style="color: black;">粉丝数: ${followerCount} <button class="copy-btn" data-copy="${followerCount}" style="background:none; border:none; cursor:pointer;">📋</button></p>
    `;
        return dataHtml;
    }

    // 使用 GM_xmlhttpRequest 请求指定的 TikTok URL
    function fetchDataFromUrl(url, callback) {
        // 在数据面板中显示加载指示器
        parsedData = { loading: true };
        showDataPanel();

        const isVideoUrl = /\/video\/\d+/.test(url);
        if (isVideoUrl) {
            // 视频链接，先请求视频数据，然后请求用户数据
            GM_xmlhttpRequest({
                method: 'GET',
                url: url,
                headers: {
                    'User-Agent': navigator.userAgent,
                    'Accept': 'text/html'
                },
                onload: function(response) {
                    if (response.status === 200) {
                        const responseText = response.responseText;
                        const scriptMatch = responseText.match(/<script id="__UNIVERSAL_DATA_FOR_REHYDRATION__" type="application\/json">([\s\S]*?)<\/script>/);
                        if (scriptMatch) {
                            try {
                                const jsonData = JSON.parse(scriptMatch[1]);
                                const data = extractDataFromJson(jsonData);
                                parsedData = data;
                                const userUrl = `https://www.tiktok.com/@${data.accountName}/`;
                                fetchUserData(userUrl, callback);
                            } catch (e) {
                                console.error('解析 JSON 时出错:', e);
                                showNotification('解析数据时出错');
                                parsedData = {};
                                showDataPanel();
                            }
                        } else {
                            console.warn('未找到指定的 <script> 标签。');
                            showNotification('未找到数据脚本标签');
                            parsedData = {};
                            showDataPanel();
                        }
                    } else {
                        console.error('请求失败，状态码:', response.status);
                        showNotification('请求失败，请检查 URL 是否正确');
                        parsedData = {};
                        showDataPanel();
                    }
                },
                onerror: function(error) {
                    console.error('请求出错:', error);
                    showNotification('请求出错，请检查网络连接');
                    parsedData = {};
                    showDataPanel();
                }
            });
        } else {
            // 用户链接，只请求用户数据
            fetchUserData(url, callback);
        }
    }

    // 请求用户数据
    function fetchUserData(userUrl, callback) {
        GM_xmlhttpRequest({
            method: 'GET',
            url: userUrl,
            headers: {
                'User-Agent': navigator.userAgent,
                'Accept': 'text/html'
            },
            onload: function(response) {
                if (response.status === 200) {
                    const responseText = response.responseText;
                    const scriptMatch = responseText.match(/<script id="__UNIVERSAL_DATA_FOR_REHYDRATION__" type="application\/json">([\s\S]*?)<\/script>/);
                    if (scriptMatch) {
                        try {
                            const jsonData = JSON.parse(scriptMatch[1]);
                            const userInfo = extractUserInfo(jsonData);
                            if (userInfo) {
                                parsedData.followerCount = userInfo.followerCount || '未知';
                                if (typeof callback === 'function') {
                                    callback();
                                }
                                showDataPanel();
                            } else {
                                console.warn('未找到用户信息。');
                                showNotification('未找到用户信息');
                                parsedData = {};
                                showDataPanel();
                            }
                        } catch (error) {
                            console.error('解析 JSON 时出错:', error);
                            showNotification('解析用户数据时出错');
                            parsedData = {};
                            showDataPanel();
                        }
                    } else {
                        console.log('未找到包含页面数据的 <script> 标签。');
                        showNotification('未找到数据脚本标签');
                        parsedData = {};
                        showDataPanel();
                    }
                } else {
                    console.error('请求失败，状态码:', response.status);
                    showNotification('请求用户数据失败，请检查 URL 是否正确');
                    parsedData = {};
                    showDataPanel();
                }
            },
            onerror: function(error) {
                console.error('请求出错:', error);
                showNotification('请求出错，请检查网络连接');
                parsedData = {};
                showDataPanel();
            }
        });
    }

    function extractDataFromJson(jsonData) {
        try {
            const itemStruct = jsonData.__DEFAULT_SCOPE__["webapp.video-detail"].itemInfo.itemStruct;
            const stats = itemStruct.stats;
            const author = itemStruct.author;

            return {
                accountName: author.uniqueId || '未知',
                createTime: itemStruct.createTime || 0,
                diggCount: stats.diggCount || 0,
                playCount: stats.playCount || 0,
                commentCount: stats.commentCount || 0,
                shareCount: stats.shareCount || 0,
                collectCount: stats.collectCount || 0
            };
        } catch (e) {
            console.error('解析数据时出错:', e);
            return {};
        }
    }

    function extractUserInfo(jsonData) {
        try {
            const userInfo = jsonData.__DEFAULT_SCOPE__["webapp.user-detail"].userInfo;
            const stats = userInfo.stats;
            return {
                followerCount: stats.followerCount || 0
            };
        } catch (e) {
            console.error('提取用户信息时出错:', e);
            return null;
        }
    }

    // 显示通知
    function showNotification(message) {
        Toastify({
            text: message,
            duration: 3000,
            close: true,
            gravity: 'top', // top 或 bottom
            position: 'center', // left, center 或 right
            style: {
                background: getRandomGradientColor(),
                color: '#FFFFFF', // 设置文字颜色为白色
                borderRadius: '2px',
            },
            stopOnFocus: true, // 鼠标悬停时停止关闭
        }).showToast();
    }

    // 获取随机的渐变颜色
    function getRandomGradientColor() {
        const gradients = [
            'linear-gradient(to right, rgb(0, 176, 155), rgb(150, 201, 61))',
            'linear-gradient(to right, rgb(255,95,109), rgb(255,195,133))',
            'linear-gradient(135deg, #73a5ff, #5477fs)'
        ];
        return gradients[Math.floor(Math.random() * gradients.length)];
    }

    // 在页面加载完成后运行 extractStats
    window.addEventListener('load', () => {
        console.log('页面已完全加载，尝试提取统计信息。');
        createButton(); // 确保按钮被创建

        if (window.location.hostname.includes('tiktok.com')) {
            extractStats();
        }
    });

    // 监听 URL 变化并重新运行 extractStats
    setInterval(() => {
        if (currentUrl !== window.location.href) {
            console.log('URL 已更改，尝试重新提取统计信息。');
            currentUrl = window.location.href;
            extractStats();
        }
    }, 1000);

    // 提取当前页面的视频统计信息
    function extractStats(isManual = false) {
        const isVideoUrl = /\/video\/\d+/.test(window.location.href);
        if (isVideoUrl) {
            // 当前是视频页面
            fetchDataFromUrl(window.location.href, () => {
                if (autoShowDataPanel || isManual) {
                    showDataPanel();
                }
            });
        } else {
            // 当前是用户页面
            fetchUserData(window.location.href, () => {
                if (autoShowDataPanel || isManual) {
                    showDataPanel();
                }
            });
        }
    }

})();